<template>
    <div class="container">
        <div class="card">
            <el-breadcrumb separator="/" class="card-body">
                <el-breadcrumb-item :to="{ path: '/AdminHome' }"><i class="el-icon-location"></i>首页</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/SystemSetting/Classification' }">分类管理</el-breadcrumb-item>
                <el-breadcrumb-item>{{ this.$route.meta.title }}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="card">
            <div class="card-header">
                <h2>"{{ sortName }}"的属性列表
                <div class="fn-btn f-right">
                    <el-button type="warning" icon="el-icon-plus" @click="create">添加属性</el-button>
                </div>                  
                </h2>
            </div>
            <div class="card-body">
                <el-table stripe :data="tableData">
                    <el-table-column prop="id" label="属性编号" width="150">
                    </el-table-column>
                    <el-table-column prop="propertyName" label="属性名称">
                    </el-table-column>
                    <el-table-column label="属性值的录入方式" width="300">
                        <template slot-scope="scope">
                          <span v-if="scope.row.formName =='input'">手工输入</span>
                          <span v-if="scope.row.formName =='radio'">列表中选取</span>
                          <span v-if="scope.row.formName =='checkbox'">列表中选取</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="optionalValue" label="可选值">
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="180">
                        <template slot-scope="scope">
                            <el-button @click="update(scope.row)" type="text" size="small">修改</el-button>
                            <el-button @click="delte(scope.row.id) " type="text" size="small">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
              <div class="page-wrap" v-if="pageTotal>10">
                  <el-pagination background @current-change="currentChange" :current-page="currentPage" layout="total, prev, pager, next, jumper" :total="pagesTotal">
                  </el-pagination>
              </div>
            </div>
        </div>
        {{ tableData }}
    </div>
</template>

<script>
import request from "@/utils/request";
export default {
  name: "AttriBute",
  data() {
    return {
      currentPage: 1,
      pageTotal: 0,

      id: "",

      sortName: "",

      HardwareSort: {
        classify: "",
        state: "",
        group: "",
        secretLevel: "",
        otherInfo: ""
      },
      tableData: [],
      dialogVisible: false,
      dialogLogDegtail: false
    };
  },
  methods: {
    delte(id) {
      this.$confirm("确认删除这个属性？")
        .then(_ => {
          request({
            method: "get",
            url: this.$api.deletSortProperty + `?id=${id}`
          }).then(res => {
            //刷新页面
            console.log(res);
            this.getSortPropertyList(10, 1);
          });
        })
        .catch(_ => {});
    },
    update(val) {
      let paramsData = {
        formName: val.formName,
        id: val.id,
        optionalValue: val.optionalValue,
        propertyName: val.propertyName,
        sortId: val.sortId,
        sortName: this.sortName
      };
      //存到session
      sessionStorage.setItem('AttrKey',JSON.stringify(paramsData));
      this.$router.push({
        name: "AttriButeUpdate",
        params: paramsData
      });
    },
    create() {
      let id = this.$route.query.id;
      let sortid = this.id;
      let sortname = this.sortName;
      this.$router.push({
        path:
          "/SystemSetting/Classification/AttriBute/Create" +
          `?id=${id}&sortid=${sortid}&sortname=${sortname}`
      });
    },
    currentChange(currentPage) {
      this.getSortPropertyList(10, currentPage)
    },
    getSortPropertyList(limit = 10, offset = 1) {
      let id = this.$route.query.id;
      request({
        method: "get",
        url:
          this.$api.getSortPropertyList +
          `?limit=${limit}&offset=${offset}&sortId=${id}`
      }).then(res => {
        //刷新页面
        console.log(res);
        this.sortName = res.data.sortManagement.label;
        this.id = res.data.sortManagement.id;
        this.tableData = res.data.sortPropertyList.list;
        this.pageTotal = res.data.sortPropertyList.total;
      });
    }
  },
  mounted() {
    this.getSortPropertyList();
  }
};
</script>